<!--
 * @Author: 赵克强 huohuo625@163.com
 * @Date: 2024-08-20 17:17:34
 * @LastEditors: 赵克强 huohuo625@163.com
 * @LastEditTime: 2024-09-13 11:35:03
 * @FilePath: \hy-ui\src\views\taskMassage\components\task\components\bulletinBoard.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="tableMode">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      size="mini"
      default-expand-all
      :row-key="rowKey"
      :tree-props="{ children: 'tasks', hasChildren: 'hasChildren' }"
      :headerCellStyle="{ 'text-align': 'center' }"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column
        prop="title"
        label="任务标题"
        width="380"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span
            @click.stop="handleTaskEdit(scope.row)"
            :style="{
              color: scope.row.code ? '#1890ff' : '#606266',
              cursor: 'pointer',
            }"
            >{{ scope.row.title }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="code" label="编号" width="180"> </el-table-column>
      <el-table-column prop="project" label="所属项目"> </el-table-column>
      <el-table-column prop="priority" label="优先级">
        <template slot-scope="scope">
          <span style="color: #999" v-show="scope.row.priority === '1'"
            >普通</span
          >
          <span style="color: #ffba00" v-show="scope.row.priority === '2'"
            >紧急</span
          >
          <span style="color: #ff4949" v-show="scope.row.priority === '3'"
            >非常紧急</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="planTime" label="计划工时(天)">
        <template slot-scope="scope">
          {{ handleEndTimeChange(scope.row.startTime, scope.row.endTime) }}
        </template>
      </el-table-column>
      <el-table-column label="截止日期">
        <template slot-scope="scope">
          <span
            :style="{
              color: getDateDiff(scope.row.endTime, true, scope.row.status),
            }"
            >{{
              getDateDiff(scope.row.endTime, undefined, scope.row.status)
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="headUserName" label="负责人"> </el-table-column>
      <el-table-column prop="planTime" label="标签" width="280">
        <template slot-scope="scope">
          <el-tag
            :style="{
              background: x.color,
              color: '#fff',
              border: 'none',
              marginRight: '5px',
              marginBottom: '5px',
              fontSize:'11px'
            }"
            size="mini"
            v-for="x in scope.row.tags"
            :key="x.id"
            >{{ x.tag }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column width="100" align="center">
        <template slot-scope="scope">
          <span style="width:20px;height:20px;display: inline-block">
            <i
            class="el-icon-delete-solid"
            v-if="
              scope.row.code &&
              [scope.row.createBy, scope.row.headUserId].includes(
                $store.state.user.loginInfo.userId
              ) &&
              scope.row.status === '0'
            "
            style="
              color: #f56c6c;
              font-size: 20px;
              cursor: pointer;
              margin-right:8px
            "
            @click.stop="handleTaskDelete(scope.row)"
          ></i>
          </span>
          <i :class="['el-icon-star-off',scope.row.followFlag ? 'isCollect' : null]" @click.stop="handleCollect(scope.row)"  v-if="scope.row.code"></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import moment from "moment";
import {collectApi} from "@/api/task/task.js";
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      tableData: [],
    };
  },
  watch: {
    "propsData.list": {
      async handler(newName, oldName) {
        this.propsData.list.forEach((item) => {
          item.tasks = this.convertToTree(item.tasks);
        });
        this.tableData = [];
        this.propsData?.list?.forEach((item) => {
          this.tableData.push({ ...item, title: item.type });
        });
      },
      immediate: true,
    },
    "propsData.viewList": {
      async handler(newName, oldName) {
        this.propsData.list.forEach((item) => {
          item.tasks = this.convertToTree(item.tasks);
        });
        this.tableData = [];
        this.propsData?.list?.forEach((item) => {
          if (
            this.propsData.viewList?.includes(item.type) ||
            !this.propsData.viewList?.length
          )
            this.tableData.push({ ...item, title: item.type });
        });
      },
      immediate: true,
    },
  },
  methods: {
    async handleCollect(val) {
      const res = await collectApi(val.followFlag ? "2" : "1", val.id);
      if (res.code === 200) {
        this.$message.success(val.followFlag ? "取消收藏成功" : "收藏成功");
        this.propsData.getList();
      }
    },
    rowKey(row) {
      return row.uuid ? row.uuid : row.id
    },
    handleTaskDelete(row) {
      this.propsData.handleTaskDelete(row.id);
    },
    handleTaskEdit(row) {
      if (
        !row.code ||
        ![row.createBy, row.headUserId].includes(
          this.$store.state.user.loginInfo.userId
        ) ||
        row.status !== "0"
      )
        return;
      this.propsData.handleTaskEdit(row.type, row.id);
    },
    handleCurrentChange(row) {
      if (!row.code) return;
      this.propsData.openTaskDrawer(row.type, row.id);
    },
    getDateDiff(date, isColor, status) {
      if (status === "0") {
        let startTime = moment().format("YYYY-MM-DD 00:00:00");
        let endTime = moment(date);
        let diff = endTime.diff(startTime, "milliseconds");
        let days = diff / (1000 * 60 * 60 * 24);
        if (days < 0) {
          return isColor ? "#F56C6C" : `逾期 ${Math.ceil(Math.abs(days))} 天`;
        }
        if (days < 1) {
          return isColor ? "#E6A23C" : `今天`;
        }
        if (days >= 1 && days < 2) {
          return isColor ? "#E6A23C" : `明天`;
        }
        if (days >= 2 && days < 3) {
          return isColor ? "#E6A23C" : `后天`;
        }
        return isColor ? "#E6A23C" : moment(date).format("YYYY-MM-DD HH:mm");
      } else {
        if (status) {
          const statusMap = {
            10: { title: "完成待审批", color: "#E6A23C" },
            20: { title: "审批中", color: "#E6A23C" },
            30: { title: "审批不通过", color: "#F56C6C" },
            40: { title: "已完成", color: "#E6A23C" },
          };
          return isColor ? statusMap[status].color : statusMap[status].title;
        }
        return null;
      }
    },
    handleEndTimeChange(startTime, endTime) {
      if (!startTime || !endTime) return "";
      if (startTime && endTime) {
        let diff = moment(endTime).diff(moment(startTime), "milliseconds");
        let days = diff / (1000 * 60 * 60 * 24);
        return Math.round(days * 10) / 10;
      }
    },
    convertToTree(data) {
      const tree = [];
      for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const parentId = node.superiorTaskId;
        if (!parentId) {
          tree.push(node);
          continue;
        }
        for (let j = 0; j < data.length; j++) {
          const parentNode = data[j];

          if (parentNode.id === parentId) {
            if (!parentNode.tasks) {
              parentNode.tasks = [];
            }
            parentNode.tasks.push(node);
            break;
          }
        }
      }
      return tree;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.tableMode {
  display: flex;
  flex-direction: column;
  ::v-deep .el-icon-star-off {
    color: rgb(189, 188, 186);
    font-size: 20px;
    cursor: pointer;
  }
  .isCollect {
    color: rgb(248, 166, 42);
  }
  .itemList {
    width: 20%;
    margin-right: 12px;
    background: #f5f5f5;
    height: 72vh;
    border-radius: 8px;
    border-top: 7px solid red;
    overflow-y: scroll;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
    .typeTitle {
      font-size: 14px;
      color: #333;
      padding: 12px 20px;
      margin: 0;
      font-weight: bold;
    }
    .itemSmall {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
      cursor: pointer;
      padding: 12px;
      margin: 10px;
      transition: 150ms ease all;
      position: relative;
      .collect {
        justify-content: flex-end;
        width: 50px;
        height: 50px;
        border-radius: 8px;
        background: #e9e9e9;
        position: absolute;
        right: 0;
        top: 0;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        display: none;
        .el-icon-star-off {
          margin-top: 5px;
          margin-right: 5px;
          font-size: 20px;
          color: rgb(248, 166, 42);
        }
      }
      .itemSmall_title {
        margin: 0;
        font-size: 14px;
        color: #666;
      }
      .itemSmall_number {
        font-size: 14px;
        color: #999;
        margin: 0;
        margin-top: 10px;
      }
      .cardLabel {
        display: flex;
        flex-wrap: wrap;
        margin-top: 8px;
        .el-tag {
          color: #fff;
          border: none;
          margin-right: 5px;
          margin-bottom: 5px;
          padding: 0 6px;
        }
        .el-tag--medium {
          line-height: 24px;
          height: 24px;
        }
      }
      .cardFzr {
        font-size: 14px;
        color: #666;
        display: flex;
        align-items: center;
        margin-top: 8px;
        span {
          margin-right: 6px;
          color: #fff;
          background: #81aada;
          padding: 3px;
          font-size: 12px;
          border-radius: 5px;
        }
      }
      .aboveTask {
        font-size: 14px;
        color: #999;
        margin-top: 8px;
      }
      .planTime {
        text-align: right;
        font-size: 13px;
        margin-top: 8px;
      }
    }
    .itemSmall:hover {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      transform: translateY(-5px);
    }
    .itemSmall:hover .collect {
      display: flex;
      justify-content: flex-end;
      background: rgb(248, 166, 42);
    }
    .itemSmall:hover .collect .el-icon-star-off {
      color: #fff;
    }
  }
}
</style>